<template>
  <div class="digital-admin-home-wrapper" @click="reSetFreshTime()">
    <d-menu></d-menu>
    <div class="right-wrapper">
      <div class="menu-header-wrapper">
        <d-header></d-header>
      </div>
      <div class="home-router-wrapper" id="homeLayout" ref="homeRouterWrapper">
        <!--        隐藏代码用于记录页面状态，需要就放开-->
        <!--        <keep-alive>-->
        <!--          <router-view v-if="!$route.meta.notKeepAlive" :scrollToBottom="scrollToBottom"></router-view>-->
        <!--        </keep-alive>-->
        <!--        <router-view v-if="$route.meta.notKeepAlive" :scrollToBottom="scrollToBottom"></router-view>-->

        <router-view></router-view>
      </div>
    </div>

    <page-timeout-refresh ref="pageTimeoutRefreshRef"></page-timeout-refresh>
  </div>
</template>

<script type="text/ecmascript-6">
  import DMenu from '../components/menu/d-menu'
  import DHeader from '../components/home/header/header'
  import WsWrapper from '../components/ws/websocket-wrapper'
  import PageTimeoutRefresh from '../components/timeout/page-timeout-refresh'

  export default {
    name: 'home-layout',
    components: {
      DMenu,
      DHeader,
      WsWrapper,
      PageTimeoutRefresh
    },
    data() {
      return {
        pageTimeoutDialogShow: false,
        pageTimeoutConfig: { //页面过期的配置项
          pageTimeoutRefreshInterval: undefined, //定时器
          lastClickTime: new Date().getTime(), //最后一次点击事件
          currentClickTime: new Date().getTime(), //当前点击事件
          timeoutTimes: 15 * 60 * 1000 //默认15分钟过期
        }
      }
    },
    beforeCreate() {
      this.$store.commit('initTopMenuList', this.$router.options.routes)
      this.$store.commit('getCurrentUser')
    },
    mounted() {
      this.pageTimeoutRefreshIntervalInit()
    },
    methods: {
      scrollToBottom() {
        this.$nextTick(() => {
          let container = this.$refs.homeRouterWrapper
          container.scrollTop = container.scrollHeight
        })
      },
      pageTimeoutRefreshIntervalInit() {
        if (this.pageTimeoutConfig.pageTimeoutRefreshInterval) {
          clearInterval(this.pageTimeoutConfig.pageTimeoutRefreshInterval)
        }
        this.pageTimeoutConfig.pageTimeoutRefreshInterval = window.setInterval(this.timeoutProcess, 10000)
      },
      // 长时间不点击刷新页面
      reSetFreshTime() {
        this.pageTimeoutConfig.lastClickTime = new Date().getTime()
      },
      timeoutProcess() {
        this.pageTimeoutConfig.currentClickTime = new Date().getTime()
        if ((this.pageTimeoutConfig.currentClickTime - this.pageTimeoutConfig.lastClickTime) > this.pageTimeoutConfig.timeoutTimes) {
          this.$refs.pageTimeoutRefreshRef.show()
        }
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "../common/css/mixin.styl"
  .digital-admin-home-wrapper
    position absolute
    top 0
    width 100%
    bottom 0
    background-color #ebf1f6
    min-width 1300px
    displayFlex()

    .right-wrapper
      width 100%
      position relative

      .menu-header-wrapper
        height 50px
        line-height 50px
        width 100%

      .home-router-wrapper
        position absolute
        top 60px
        left 10px
        bottom 10px
        right 10px
        background-color white
        border-radius 5px
        overflow-y: auto

  .digital-logo
    height 50px
    line-height 50px
    text-align center
</style>
